<template>
    <div id="login">
        <Header />
        <section>
            <div class="loginTop">
                <img src="./images/login_img1.png" alt="">
            </div>
            <div class="loginCenter">
                <div class="loginCenter_top">
                    <span class="loginCenter_top_line"></span>
                    <span class="loginCenter_lineCenterText">{{ loginStatus?"登录":"注册" }}</span>
                </div>
                <div class="loginCenter_und">
                      <div class="loginCenter_right">
                    <div class="loginCenter_right_imgBox">
                        <img src="./images/login_Qr.png" alt="" class="login_qr">
                        <p>请使用微信扫码登录</p>
                    </div>
                        <img src="./images/login_leftImg.png" alt="" class="login_leftImg">
                        <img src="./images/login_rightImg.png" alt="" class="login_rightImg">
                </div>
                <div class="loginCenter_line"></div>
                <div class="loginCenter_left">
                    <login-from v-if="loginStatus" :changeLoginStatus="changeLoginStatus"></login-from>
                    <register-from v-else  :changeLoginStatus="changeLoginStatus"></register-from>
                </div>
                </div>
            </div>
        </section>
        <Footer></Footer>
        
    </div>
</template>

<script>
import LoginFrom from "./components/loginForm"
import RegisterFrom from "./components/registerForm"
    export default {
        data() {
            return {
                // 顶部文字
               loginStatus:true
            //    登录或者是注册状态
            }
        },
        components:{
            LoginFrom,
            RegisterFrom,
        },
        methods:{
            changeLoginStatus(){
                this.loginStatus = !this.loginStatus
            }
        }
    }
</script>

<style lang="scss" scoped>
header {
    background-color: red;
    height: 150px;
}
section {
    position: relative;
    height: 530px;
    .loginTop{
        position: absolute;
        width: 100%;
        height: 86px;
        background-color: #00a0d8;
        text-align: center;
    }
    .loginCenter_top{
        .loginCenter_top_line{
        position: absolute;
        transform: translateX(50%);
        top: 140px;
        right: 50%;
        width: 80%;
        height: 1px;
        border-top: 1px solid #ddd;
        }
        .loginCenter_lineCenterText{
            position: absolute;
            top:110px;
            right: 50%;
            transform: translate(50%);
            width: 116px;
            height: 50px;
            font-size: 38px;
            background-color: #fff;
            text-align: center;
        }
    }
    .loginCenter_und{
        position: absolute;
        top:140px;
        left: 50%;
        transform: translateX(-50%);
        width: 1200px;
        height: 350px;
        display: flex;
        justify-content: center;
    .loginCenter_right {
        position:absolute;
        top: 10%;
        left: 13%;
        .loginCenter_right_imgBox{
        position: relative;
        width: 200px;
        p{
            text-align: center;
            color: red;
            font-weight: 700;
        }
        .login_qr {
            width:200px;
            margin-bottom: 20px;
        }
        }
        .login_leftImg,
        .login_rightImg {
            position: absolute;
            width: 150px;
            top: 100px;
        }
        .login_rightImg {
            left: 250px;
        }
        .login_leftImg {
            left: -200px;
        }
    }
    .loginCenter_line {
        transform: translateY(10%);
        width: 1px;
        height: 90%;
        background: #ddd;
    }
    .loginCenter_left {
        border: 1px solid black;
        box-shadow: 1px 1px 10px black;
        position: absolute;
        top: 10%;
        right: 4%;
        width: 480px;
        height: 300px;
    }
    }
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: black;
    height: 150px;
}

</style>